<template>
  <div>{{student.name}} 今年已经 {{student.age}}岁了</div>
  <button @click="passYear">过了一年</button>
  <div>{{ msg }}</div>
  <button @click="translate">翻译</button>
</template>
<script setup>
// ref 就是一个组合式API  
import { reactive, ref } from 'vue';
  
// reactive 响应式数据声明
// 只能处理复杂类型
// const student = reactive({name: 'tom', age: 18})
// const passYear = () => {
//   student.age ++
// }
// ref 响应式数据声明
// 简单类型和复杂类型都可以
// 但是在 script 标签中使用时必须加上 .value

const student = ref({name: 'tom', age: 18})
const passYear = () => {
  student.value.age ++
}
let msg = ref('你好世界')
const translate = () => {
  msg.value = 'hello world'
}





</script>